<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>工商年检</title>
    <link rel="stylesheet" href="../../../style/js/layuii/css/layui.css">
    <script src="../../../style/js/layuii/layui.js"></script>
    <script src="../../style/js/jquery-3.2.1.min.js"></script>
    <style>

        .layui-table, .layui-table-view{
            /*主页面数据表*/
            margin-left: 20px;
        }
        .layui-form-select .layui-input{
            /*年检人员*/
            height: 24px;
            width: 200px;
            border-radius: 0px;
        }
        .hx{
            font-size: 12px;
        }
        body .layui-table-cell {
            font-size: 12px;
        }
        .layui-laypage .layui-laypage-curr .layui-laypage-em {
            background-color: #60c7d0;
        }
    </style>
</head>
<body>
<!--//页面标题-->
<div class="layui-row">
    <div class="layui-col-md12" style="text-align: center;margin-top: 2%;margin-bottom: 1%;">
        <span id="VouCher" style="font-weight: bold;font-size: 20px;">工商年检</span>
    </div>
</div>
<form class="layui-form">
    <table class="layui-hide" id="gongShangNianJianTable" lay-filter="gongShangNianJianTable"></table>
</form>
<!--查看详情弹框页-->
<div class="layui-form" id="chaKanXiangQing" style="display: none">
    <form id="hx" class="layui-form" action="javascript:;">
        <!--分割线-->
        <hr size="1" noshade="noshade" style="border:0.1px #cccccc dotted;">
        <!--   年检时间     -->
        <div class="layui-form-item huixian" style="">
            <div class="layui-inline jinyong">
                <label class="layui-form-label huixiantanchu ziti1" style="margin-top:-10px;margin-left: 30px;font-size: 12px;">年检时间：</label>
                <span class="hx" id="njsj"></span>
            </div>
        </div>

        <!--   所属年度     -->
        <div class="layui-form-item huixian" id="hxkp" style="margin-top: -25px;">
            <div class="layui-inline jinyong" >
                <label class="layui-form-label huixiantanchu ziti1" style="margin-top:-11px;margin-left: 30px;font-size: 12px;" >所属年度：</label>
                <span class="hx" id="ssnd"></span>
            </div>
        </div>
        <!--        附件展示-->
        <div class="layui-form-item huixian">
            <div class="layui-inline jinyong" >
                <label class="layui-form-label huixiantanchu ziti1" style="margin-top:-43px;margin-left: 30px;font-size: 12px;" >查看附件：</label>
            </div>
            <div class="layui-row" style="margin-left: 139px;margin-top: -41px;font-size: 13px" id="lookFuJian">

            </div>
        </div>
    </form>
    <!--        图片展示-->
    <div class="layui-row" style="text-align: left;color: #000000;width: 120px;height: 40px;margin-left: 65px;margin-top: -19px;font-size: 12px">年检截图：</div>
    <div class="layui-row" id="nianJianTuPian" style="margin: 0 20px 20px 20px;">
    </div>
</div>
<div id="test1" style="margin-top: 20px;display: none">
    <div class="layui-carousel" id="test10" lay-filter="test10">
        <div carousel-item id="lunBo">
        </div>
    </div>
</div>

<!--表格操作栏那妞-->
<script id="barDemo" type="text/html">
    <a class="zly-btn" lay-event="edit" style="color: #60c7d0">详情</a>
</script>
</body>
<script>

    var zuoZhangShenBaoId;
    var FilePath = [];
    var fuJianPath = [];
    var daiLiShangCid;
    var zhuangTaiId;
    layui.use(['table', 'layer', 'jquery', 'form', 'laydate', 'element', 'upload', 'carousel','element'], function () {
        let table = layui.table,
            $ = layui.jquery,
            form = layui.form,
            layer = layui.layer,
            laydate = layui.laydate,
            element = layui.element,
            upload = layui.upload,
            carousel = layui.carousel;
        forms = layui.form;
        tables = layui.table;
        layers = layui.layer;
        carousels = layui.carousel;

        // 客户类型下拉框监听事件
        form.on('select(search_type)',function (data) {
            var signName = $('#keHuLeiXing option:selected').text();
            console.log(signName)
            if(signName === "已年检客户"){
                $("#fuWu").hide();
                $("#suoshuNianDU_hx").show();
            }else{
                $("#fuWu").show();
                $("#suoshuNianDU_hx").hide();

            }
        })

        //建造实例
        carousel.render({
            elem: '#test1'
            , width: '100%' //设置容器宽度
            // ,arrow: 'always' //始终显示箭头
            , anim: 'fade' //切换动画方式
        });

        // 所属年度
        laydate.render({
            elem: '#suoShuNianDu'
            ,type: 'year'
        });
        // 搜索栏——所属年度
        laydate.render({
            elem:'#suoShuNianDu_souSuo'
            ,type:'year'
        })
        //年检时间
        laydate.render({
            elem: '#nianJianTime'
            ,format: 'yyyy-MM-dd'
        });
        //提交时间
        laydate.render({
            elem: '#tiJiaoTime'
            ,format: 'yyyy-MM-dd'
        });
        var myDate = new Date();
        // var n = myDate.getYear();        //获取当前年份(2位)
        var n = myDate.getFullYear();    //获取完整的年份(4位,1970-????)
        var y = myDate.getMonth()+1;       //获取当前月份(0-11,0代表1月)
        var r = myDate.getDate();        //获取当前日(1-31)
        console.log(n);
        console.log(y);
        console.log(r);
        var tiJiaoShiJian = n+"-"+y+"-"+r;
        console.log(tiJiaoShiJian)
        $("#tiJiaoTime").val(tiJiaoShiJian)


        //主页面数据表
        table.render({
            elem: '#gongShangNianJianTable'
            ,url:'/gongShangNianJian/selectGongShangNianJian'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,async:true
            ,page:true
            ,cols: [[
                {title: '序号', fixed: 'left', type: 'numbers'}
                ,{field:'companyName', title: '公司名称',}
                ,{field:'suoShuNainDu', title: '所属年度'} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                ,{field:'nianJianShiJian', title: '年检时间'}
                ,{field:'caozuo',title:'操作',toolbar:'#barDemo',align:'center',fixed:'right'}
            ]]
            ,parseData: function(res) { //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": "", //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data //解析数据列表
                };
            }
        });
        //表格工具栏监听
        table.on('tool(gongShangNianJianTable)', function(obj){
            if(obj.event === 'edit'){
                console.log(obj)
                // $("#chaKanXiangQing").show();
                layer.open({
                    type: 1,
                    title: "查看详情",
                    area: ['550px', '100%'],
                    offset: 'rt',
                    shadeClose: true,//点击遮罩关闭弹窗
                    content: $("#chaKanXiangQing"),
                    end:function(){
                        $("#chaKanXiangQing").css("display","none");
                    }
                });

                var html = $("#test1").html();
                $("#nianJianTuPian").html(html);

                let data = obj.data
                $("#tjr").html(data.tiJiaoRenName);//提交人
                $("#hxgsname").html(data.companyName);//公司名
                $("#tjsj").html(data.createTime);//提交时间
                $("#njry").html(data.nianJianRen);//年检人员
                $("#njsj").html(data.nianJianShiJian);//年检时间
                $("#tjry").html(data.tiJiaoRenName);//提交人员
                let tijiaoshijian = data.updateTime.substring(0,10)
                $("#tjsj1").html(tijiaoshijian);//提交时间
                $("#tjsj").html(tijiaoshijian);//提交时间
                $("#ssnd").html(data.suoShuNainDu);//所属年度
                let path = data.nianJianTuPianLuJing;
                console.log(path)
                let paths = path.split(",");

                console.log(paths)
                $("#lunBo").html("")
                for (var i = 0; i < paths.length; i++) {
                    // console.log(paths[i].replace(/\[|]/g,''))
                    var filePath=paths[i].replace(/\[|]/g,'').replace(/\"/g, "");
                    if (paths[i] != null) {
                        $("#lunBo").append("<div><img layer-src=" + filePath + "  src=" + filePath + " id='tuPian_" + i + "' style='width: 480px;height: 260px' ></div>")
                        $("#tuPian_" + i).click(function () {
                            // layer.open({
                            //     type: 1,
                            //     title: false,
                            //     closeBtn: 0,
                            //     shade: [0.3, '#000'],//黑色背景（0.3代表颜色深度）
                            //     shadeClose: true,//点击遮罩关闭大图
                            //     area: ['80%', '88%'], //宽高
                            //     content: '<img class="Img" style="width: 100%;height: 100%;" src="' + paths[i].filePath + '" />'
                            // });

                            layer.photos({
                                photos: "#lunBo",
                                offset: ['14px'],
                                anim: 5,//0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                            })
                        })
                    }
                }

                //建造实例
                carousel.render({
                    elem: '#test10'
                    , width: '100%' //设置容器宽度
                    , arrow: 'hover' //始终显示箭头
                });
                //触发轮播切换事件
                carousel.on('change(test10)', function (obj) { //test1来源于对应HTML容器的 lay-filter="test1" 属性值
                    console.log(obj.index); //当前条目的索引
                    console.log(obj.prevIndex); //上一个条目的索引
                    console.log(obj.item); //当前条目的元素对象
                });

                // 附件回显
                let fujianPath = data.fuJianLuJing;
                let fjPath = fujianPath.split(",");
                $("#lookFuJian").html(" ");
                for (var j = 0; j < fjPath.length; j++) {
                    console.log(fjPath[j].replace(/\[|]/g,''))

                    if (fjPath[j] != null) {
                        // $("#tuPianA").append("<img class='yinying' style='padding: 3px; width: 80px;height: 80px;' data='" + paths[j].replace(/\[|]/g,'').replace(/\"/g, "") + "' src='" + paths[j].replace(/\[|]/g,'').replace(/\"/g, "") + "'  id='imgs" + j + "' title=" + j + "/>");

                        $("#lookFuJian").append("<span>"+fjPath[j].replace(/\[|]/g,'').replace(/\"/g, "").slice(65)+"</span>&nbsp;&nbsp;&nbsp;<button type='button' style='border:0;background-color:white;color:#60c7d0;font-size: 12px;' id='xiaZai" + j + "'>下载</button></br>")
                        var xiazaiPath = fjPath[j].replace(/\[|]/g,'');

                        $("#xiaZai"+j+"").click(function(){
                            console.log(xiazaiPath)
                            // console.log(fjPath[j].replace(/\[|]/g,''))
                            window.location.href = xiazaiPath.replace(/\"/g, "");
                        })

                    }

                }
            }
        })

        // 新增弹框页关闭
        $("#tiJiaoQuXiao").click(function(){
            layer.closeAll();
        })
        //详情弹框页关闭
        $("#xiangQingQuXiao").click(function(){
            layer.closeAll();

            table.reload('gongShangNianJianTable');
        })
    })
</script>
</html>